<template>
    <div class="divSureCheckTask divWarehouse">
        <div class="divContent box">
            <div  v-if="tableData.length>0">
                <el-table
                :data="tableData"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                :header-cell-style="{ background: '#f9f6ee' }"
                >
                <el-table-column
                    type="index"
                    align="center"
                    width="68"
                    label="序号"
                />
                <el-table-column
                    prop="warehouseName"
                    align="center"
                    label="仓库名称"
                    width="160"
                />
                <el-table-column
                    prop="areaName"
                    align="center"
                    label="库区名称"
                    width="150"
                />
                <el-table-column
                    prop="areaCode"
                    align="center"
                    label="库位编码"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="locationName"
                    align="center"
                    label="库位名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsName"
                    align="center"
                    label="货品名称"
                    width="160"
                />
                <el-table-column
                    prop="goodsCode"
                    align="center"
                    label="货品编码"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="goodsBarCode"
                    align="center"
                    label="货品条码"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="ownerName"
                    align="center"
                    label="货主名称"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="stockNum"
                    align="center"
                    label="库存数量"
                    width="160"
                >
                </el-table-column>
                <el-table-column
                    prop="checkNum"
                    align="center"
                    label="实盘数量"
                    width="150"
                >
                  <template slot-scope="{ row }">
                    <span v-if="!row.edit"><span>{{row.checkNum}}</span></span>
                    <el-input
                      v-else
                      v-model="row.checkNum"
                      class="editInput"
                    ></el-input>
                    <span v-if="editFlag === '1'">
                      <span
                        v-if="!row.edit"
                        class="imagesIcon imgEdit"
                        @click="row.edit = true"
                      ></span>
                      <span
                        v-if="row.edit"
                        class="imagesIcon imgSave"
                        @click="inputSureClick(row)"
                      ></span>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="realDifferenceNum"
                    align="center"
                    label="差异"
                    width="160"
                >
                      <template  slot-scope="{row}">
                          <span>{{row.checkNum - row.stockNum}}</span>
                      </template>
                </el-table-column>
                </el-table>
                <!-- 分页 -->
                <base-pagination :total="paging.total" :limit="paging.size" @current-change="handleCurrentChange"  @size-change="handleSizeChange"></base-pagination>
            </div>
            <div
                v-else
                class="emptyTip"
            >
                <span class="imgIcon"></span>
                <p>暂无盘点清单</p>
            </div>
            <div class="buttonBox" style="margin-left:0;margin-right:0">
                <base-button
                    class="unimportanceButton"
                    @click="btnReturnClick"
                >返回</base-button>
                <base-button
                    class="minorImportantButton"
                    @click="btnSaveClick"
                    v-if="editFlag === '1'"
                >提交</base-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator'
import BaseButton from '@/components/base-button/index.vue'
import BasePagination from '@/components/base-pagination/index.vue'
import { ICommonReturn } from '@/utils/common-interface'
import SinglePage from '@/mixin/single-page'
import { mixins } from 'vue-class-component'
import { ICheckListTableData } from '@/module-storage/interface/check-list'
import { findCheckListDetailsPaging, updateCheckList } from '@/module-storage/api/check-list'

@Component({
  name: 'SureCheckTask',
  components: {
    BaseButton,
    BasePagination
  }
})
export default class extends mixins(SinglePage) {
    private tableData:ICheckListTableData[] = []

    private loading = false

    private paging = {
      current: 1, // 当前页码
      size: 10, // 每页数据量
      total: 0
    }

    private editFlag = '1'

    created() {
      this.initData()
    }

    private initData() {
      this.getList()
    }

    private async getList() {
      this.loading = true
      const arr = this.$route.params.id.split('&')
      const params = {
        masterId: arr[0],
        current: this.paging.current,
        size: this.paging.size,
        status: arr[1]
      }
      this.editFlag = arr[2]
      const { data } = await findCheckListDetailsPaging(params)
      this.loading = false
      this.tableData = data.records.map((item:ICheckListTableData) => {
        return { ...item, edit: false }
      })
      this.paging.total = parseInt(data.total, 10)
    }

    private handleCurrentChange(page:number) {
      this.paging.current = page
      this.getList()
    }

    private handleSizeChange(page:number) {
      this.paging.size = page
      this.paging.current = 1
      this.getList()
    }

    private async inputSureClick(row:any) {
      if (row.checkNum || row.checkNum === 0) {
        const data = ((await updateCheckList({ id: row.id, checkNum: row.checkNum })) as unknown) as ICommonReturn
        if (data.code === 0) {
          this.$message.success('修改成功')
          row.edit = false
        } else {
          this.$message.error(data.msg)
        }
      } else {
        this.$message.error('请输入实盘数量')
      }
    }

    private btnReturnClick() {
      this.closeWindow()
    }

    private btnSaveClick() {
      // 进行是否有编辑状态数据的校验
      let flag = true
      this.tableData.forEach((item :any) => {
        if (item.edit || item.checkNum === null || item.checkNum === undefined) {
          flag = false
        }
      })
      if (flag) {
        this.closeWindow()
      } else {
        this.$message.error('任务有未填写项，不能完成')
      }
    }
}
</script>

<style scoped lang="scss">
.divSureCheckTask{
    .divContent {
      padding-top: 20px;
      padding-bottom: 20px;
    }
    .tableInfo{
        text-align: right;
        .unimportanceButton{
            margin-right: 20px;
        }
    }
    .input-img-sure{
        width: 20px;
        height: 20px;
        margin-left: 10px;
        cursor: pointer;
        position: absolute;
        top: 50%;
        right: 10px;
        transform: translate(0, -50%);
    }
    .input-img-edit{
        width: 20px;
        height: 20px;
        cursor: pointer;
        float: right;
    }
    .edit-input{
        width: 80px;
        height: 20px;
    }
}

</style>
